<template>
  <div>
    <a-modal :footer="false" @open="getList" :visible="visible" @ok.stop="handleOk" @cancel="handleCancel" :align-center="false" title-align="start" width="800px" top="20%" :mask-closable="false">
      <template #title> 添加属性分组 </template>
      <a-button type="primary" @click="data.push({ code: '', name: '', isEdit: true })">新增分组</a-button>
      <a-table class="table-singe-line" size="mini" :data="data" @change="handleChange" :pagination="false" :scroll="{ y: 300 }" style="margin-top: 10px">
        <template #columns>
          <a-table-column v-for="item of columns" :align="item.align" :width="item.width" :title="item.title" :data-index="item.dataIndex">
            <template v-if="item.title == '序号'" #cell="{ record, rowIndex }">
              {{ rowIndex + 1 }}
            </template>
            <template v-else-if="item.title == '分组名称'" #cell="{ record }">
              <span v-if="!record.isEdit">{{ record.name }}</span>
              <a-input v-else v-model="record.editName" allow-clear placeholder="请输入"></a-input>
            </template>
            <template v-else="item.title == '操作'" #cell="{ record, rowIndex }">
              <div style="width: 100%">
                <span v-if="record.id && !record.isEdit">
                  <a-button type="text" @click="edit(record, rowIndex)">编辑</a-button>
                  <a-button type="text" style="margin-left: 10px" @click="del(record, rowIndex)">删除</a-button>
                </span>
                <span v-else>
                  <a-button type="text" @click="save(record)">保存</a-button>
                  <a-button type="text" style="margin-left: 10px" @click="cancel(record, rowIndex)">取消</a-button>
                </span>
              </div>
            </template>
          </a-table-column>
        </template>
      </a-table>
    </a-modal>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref, computed, reactive } from 'vue'
  import { getPropertyGroupList, updatePropertyGroupList, deletePropertyGroup } from '@/api/product'
  import { Message } from '@arco-design/web-vue'

  const columns: any = [
    {
      title: '序号',
      align: 'left',
      width: 30,
    },
    {
      title: '分组编码',
      dataIndex: 'code',
      align: 'left',
      width: 150,
    },
    {
      title: '分组名称',
      dataIndex: 'name',
      align: 'left',
      width: 150,
    },
    {
      title: '操作',
      align: 'left',
      width: 150,
    },
  ]

  export default defineComponent({
    name: 'addCateGory',
    setup() {
      let visible = ref(false)
      let data: any = ref([{ code: '11', name: 'zws', id: '222' }])

      const handleOk = async () => {}
      const handleCancel = () => {
        visible.value = false
      }

      const handleChange = (val: any) => {
        data.value = val
      }
      const edit = (data: any, index: any) => {
        data.isEdit = true
        console.log(data, index)
      }

      const cancel = (val: any, index: any) => {
        if (val.id) {
          val.editName = val.name
          val.isEdit = false
        } else {
          data.value.splice(index, 1)
        }
      }

      const del = async (val: any, index: any) => {
        let params = {
          idList: new Array(val.id),
        }
        const res: any = await deletePropertyGroup(params)
        if (res.code == 'SUCCESS') {
          Message.success('删除成功')
        }
        getList()
      }
      const save = async (val: any) => {
        let params = {
          name: '',
        }
        if (val.id) {
          params = val
          params.name = val.editName
        } else {
          params.name = val.editName
        }
        const res: any = await updatePropertyGroupList(params)
        if (res.code == 'SUCCESS') {
          val.id ? Message.success('编辑成功') : Message.success('保存成功')
          val.isEdit = false
        }
        getList()
      }

      const getList = async () => {
        const res: any = await getPropertyGroupList()
        if (res.code == 'SUCCESS') {
          data.value =
            res?.data.map((e: any) => {
              e.editName = e.name
              return e
            }) || []
        }
      }

      getList()

      return { visible, handleOk, handleCancel, columns, data, handleChange, edit, cancel, del, save, getList }
    },
  })
</script>

<style lang="less" scoped>
  .icon {
    color: #2b65ef;
    font-size: 20px;
  }
  .dyna-table {
    // padding: 10px 20px;
    box-sizing: border-box;
    .title {
      font-size: 16px;
      height: 18px;
      line-height: 18px;
      margin-bottom: 20px;
      &::before {
        content: '';
        display: inline-block;
        width: 6px;
        height: 18px;
        background-color: #2561ef;
        float: left;
        margin-right: 5px;
        border-radius: 3px;
      }
      &::after {
        content: '';
        display: inline-block;
        width: calc(100% - 80px);
        margin: -9px 0 0 81px;
        border-top: 1px solid #f2f2f2;
        float: left;
      }
    }
  }
</style>
